<template>
  <view class="dy-scroll-container">
    <dy-navbar title="图片" />
    <scroll-view class="dy-scroll" scroll-y>
      <dy-card>
        <dy-section slot="title">基础用法</dy-section>
        <template slot="body">
          <view class="dy-justify-around">
            <view>
              <view class="dy-justify-center dy-mg-bottom-10">正常加载</view>
              <dy-img
                width="220"
                height="120"
                :custom-style="{ background: '#cccccc' }"
                :src="imgsrc"
              />
            </view>
            <view>
              <view class="dy-justify-center dy-mg-bottom-10">加载失败</view>
              <dy-img
                width="220"
                height="120"
                :custom-style="{ background: '#cccccc' }"
                :src="imgsrc + 1"
              />
            </view>
            <view>
              <view class="dy-justify-center dy-mg-bottom-10">自定占位内容</view>
              <dy-img
                width="220"
                height="120"
                :custom-style="{ background: '#cccccc' }"
                :src="imgsrc + 1"
              >
                <view slot="error">
                  自定义占位内容
                </view>
              </dy-img>
            </view>
          </view>
        </template>
      </dy-card>

      <dy-card>
        <dy-section slot="title">懒加载</dy-section>
        <template slot="body">
          <view class="dy-align-center dy-justify-around">
            <view>
              <view class="dy-text-center">spinner-菊花'</view>
              <dy-img
                width="220"
                height="200"
                mode="widthFix"
                :custom-style="{ background: '#cccccc' }"
                :src="imgsrc"
              />
            </view>
            <view>
              <view class="dy-text-center">round-圆环</view>
              <dy-img
                width="220"
                height="200"
                mode="widthFix"
                loading-type="round"
                :custom-style="{ background: '#cccccc' }"
                :src="imgsrc"
              />
            </view>
          </view>
        </template>
      </dy-card>

      <dy-card>
        <dy-section slot="title">裁剪/缩放</dy-section>
        <template slot="body">
          <view class="dy-align-center dy-flex-column">
            <view class="dy-mg-bottom-10">widthFix-高度自适应</view>
            <dy-img
              width="220"
              mode="widthFix"
              :custom-style="{ background: '#cccccc' }"
              :src="imgsrc"
            />
          </view>
          <view class="dy-flex-column-center dy-mg-top-20">
            <view class="dy-mg-bottom-10">scaleToFill-不保持比例缩放</view>
            <dy-img
              width="220"
              height="320"
              mode="scaleToFill"
              :custom-style="{ background: '#cccccc' }"
              :src="imgsrc"
            />
          </view>
          <view class="dy-flex-column-center dy-mg-top-20">
            <view class="dy-mg-bottom-10">aspectFit-保持比例显示长边</view>
            <dy-img
              width="220"
              height="220"
              mode="aspectFit"
              :custom-style="{ background: '#cccccc' }"
              :src="imgsrc"
            />
          </view>
          <view class="dy-flex-column-center dy-mg-top-20">
            <view class="dy-mg-bottom-10">aspectFill-保持比例显示短边</view>
            <dy-img
              width="220"
              height="220"
              mode="aspectFill"
              :custom-style="{ background: '#cccccc' }"
              :src="imgsrc"
            />
          </view>
        </template>
      </dy-card>

      <dy-card>
        <dy-section slot="title">图片形状</dy-section>
        <template slot="body">
          <view class="dy-align-center dy-justify-around">
            <view>
              <view class="dy-text-center">square-方形</view>
              <dy-img
                width="220"
                height="220"
                mode="widthFix"
                shape="square"
                :custom-style="{ background: '#cccccc' }"
                :src="imgsrc"
              />
            </view>
            <view>
              <view class="dy-text-center">round-圆形</view>
              <dy-img
                width="220"
                height="220"
                mode="scaleToFill"
                loading-type="round"
                shape="round"
                :custom-style="{ background: '#cccccc' }"
                :src="imgsrc"
              />
            </view>
          </view>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Img',
  data() {
    return {
      imgsrc: require('./x.jpg')
    }
  }
}
</script>
